[CSS] 한글과 영문 텍스트 동일한 line-height를 지정해도 차이가 나는 이유

 
간단하게 예를들어보겠습니다. 만약 크기가 100px, 30px인 버튼을 만든다고 가정합니다. 그런경우 버튼 안에 들어갈 텍스트를 중간에 위치시키기 위해 알맞은 line-height 속성을 적용합니다. height가 30px이므로 line-height: 30px이 적당할 것입니다.

하지만 문제가 나타나는데... 영문의 경우 중간에 위치한 것으로 보이지만 한글의 경우 조금 내려가보입니다. 분명 height, line-height 모두 30px인데 말이죠... 이 이유는 무엇일까요??? 아래의 두 버튼 이미지를 보시죠.


두 버튼의 크기는 동일하게 width: 100px, height: 30px, line-height: 30px;

위에 보시면 한글로 적힌 라인하이트가 1px 위로 올라가면 더 좋지 않을까라는 생각을 하실겁니다. 사실 1px의 차이는 작을 수도 있으나 height 값이 작아질 수록 그 차이는 커질것입니다. 그 옆에 영문 텍스트를 보면 대략적으로 세로 중앙에 정렬된 것으로 보입니다. 왜 같은 css 값이 적용되었음에도 차이가 날까요?

# 한글과 영문의 폰트 자체의 차이 때문

영문의 경우 g의 아래 부분처럼 하단에 나오는 부분이 없는 알파벳이 대부분입니다. 그렇기 때문에 살짝 내려가 보이는 것이 마치 중앙정렬이 맞는 것처럼 보이게됩니다. 하지만 한글은 알파벳과 다르게 상중하 각각의 단어 하나가 균일하게 배치되어 있습니다. 결국 중앙보다 좀 더 아래에 있게보이는 것이죠...



위  이미지를 보시면 영문과 한글이 동일선상에 동일한 line-height를 가지고 적혀있습니다. 하지만 영문의 경우 하단에 선을 그어보면 한글과의 차이가 확연합니다. 분명히 같은 값이지만 좀 더 높이 위치해있죠. 만약 이 사이에 gjpq등의 텍스트가 포함되었다면? 그 하단의 길이는 한글과 같아지겠죠.

결론은 이런 시각적인 차이를 맞추기 위해서 line-height와 height가 동일하여도 차이가 나게되는것입니다.